<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
        <style>
            html,
            body {
                padding: 0;
                margin: 0;
            }

            .container {
                width: 600px;
                display: flex;
                flex-direction: row;
            }

            .column {
                display: flex;
                flex-direction: column;
                flex: 1;
                margin: 0 15px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="column" v-for='(colItem,colIndex) in dataList'>
                <div class="item" v-for='(item,index) in colItem' :key='index' :style="{height:item.height,background:item.background}">col1-{{index}}</div>
            </div>
            <!-- <div class="column" ref='two'>
                <div class="item" v-for='(item,index) in dataList[1]' :key='index' :style="{height:item.height,background:item.background}">col2-{{index}}</div>
            </div>
            <div class="column" ref='three'>
                <div class="item" v-for='(item,index) in dataList[2]' :key='index' :style="{height:item.height,background:item.background}">col3-{{index}}</div>
            </div> -->
        </div>
    </body>
    <script>
        new Vue({
            el: '.container',
            data: {
                imgList: [],
                dataList: [[],[],[]]
            },
            mounted() {
                this.initData()
                this.dealData()
            },
            methods: {
                proRandom(start, end) {
                    return Math.floor(Math.random() * (end - start) + start)
                },
                // 模拟数据
                initData() {
                    this.imgList = Array(20).fill(1).map(item => {
                        const color1 = this.proRandom(0, 255)
                        const color2 = this.proRandom(0, 255)
                        const color3 = this.proRandom(0, 255)
                        return {
                            height: this.proRandom(100, 300) + 'px',
                            background: `rgb(${color1},${color2},${color3})`,
                            title: 'kaak'
                        }
                    })
                },
                // 处理数据分成三列
                dealData() {
                    let i = 0;
                    while (i < this.imgList.length) {
                        const minIndex = this.getLowestIndex(this.dataList)
                        this.dataList[minIndex].push(this.imgList[i++])
                    }
                },
                // 计算高度最低列的index
                getLowestIndex(dataList){
                    const newArr = dataList.map(item=>{
                        return item.reduce((p,c)=>{
                            return p + parseInt(c.height)
                        },0)
                    })
                    const minValue = Math.min(...newArr)
                    const minIndex = newArr.indexOf(minValue)
                    return minIndex
                },
            }
        })
    </script>

</html>